<template>
  <div style="width: 99%;  margin: auto;">

    <el-row>
      <el-col :span="23">
        <h2>{{year}}参加国际会议和出访情况</h2>
      </el-col>
    </el-row>
    <el-form :model="exChange" ref="exChangeRef" :rules="exChangeRules" label-width="200px">
      <el-row>
        <el-col :span="24">
          <h3>{{year}}年度参加国际会议情况</h3>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="共计参加次数" prop="participateUnit">
          <el-input type="number" v-model="exChange.participateUnit" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="主办（联合主办）次数" prop="hostNum">
            <el-input type="number" v-model="exChange.hostNum" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="承办（联合承办）次数" prop="undertakingNum">
            <el-input type="number" v-model="exChange.undertakingNum" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="参与次数" prop="participateNum">
            <el-input type="number" v-model="exChange.participateNum" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <h3>{{year}}年度出国（境）情况</h3>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="组织或者参与出访团组次数" prop="participateVisiting">
            <el-input type="number" v-model="exChange.participateVisiting" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="margin-bottom: 15px;">
          <el-form-item label="本单位共计出访次数" prop="internationalVisits">
            <el-input type="number" v-model="exChange.internationalVisits" placeholder="请输入" style="width: 100%;"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 50px;">
      <el-col :span="16">
        <h3> 在境外设立机构情况（没有就不填）</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button  size="default" style="width: 100px;margin-top: 14px;" type="primary" @click="addList()">新增</el-button>
      </el-col>
    </el-row>
    <el-form :model="listForm" ref="listFormRef">
    <el-row>
      <el-col :span="24" style="margin-top: 20px;">
        <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="listForm" border>
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="institutionName" label="机构名称" align="center" width="200">
            <template #default="scope">
<!--              :rules="listRules.institutionName"-->
              <el-form-item :prop="'[' + scope.$index + '].institutionName'" >
              <el-input v-model="scope.row.institutionName" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="institutionCountry" label="所在国家（地区）" align="center" width="160">
            <template #default="scope">
<!--              :rules="listRules.institutionCountry"-->
              <el-form-item :prop="'[' + scope.$index + '].institutionCountry'" >
              <el-select clearable  v-model="scope.row.institutionCountry" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in countryOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="institutionType" label="机构类型" align="center" width="160">
            <template #default="scope">
<!--              :rules="listRules.institutionType"-->
              <el-form-item :prop="'[' + scope.$index + '].institutionType'" >
              <el-select clearable  v-model="scope.row.institutionType" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in orgTypeOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="establishTime" label="设立时间" align="center" width="160">
            <template #default="scope">
<!--              :rules="listRules.establishTime"-->
              <el-form-item :prop="'[' + scope.$index + '].establishTime'" >
              <el-date-picker
                v-model="scope.row.establishTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="设立时间">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="responsible" label="负责人" align="center" width="160">
            <template #default="scope">
<!--              :rules="listRules.responsible"-->
              <el-form-item :prop="'[' + scope.$index + '].responsible'" >
              <el-input v-model="scope.row.responsible" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="expatriatesNum" label="外派工作人数" align="center" width="160">
            <template #default="scope">
<!--              :rules="listRules.expatriatesNum"-->
              <el-form-item :prop="'[' + scope.$index + '].expatriatesNum'" >
              <el-input type="number" v-model="scope.row.expatriatesNum" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
            <template #default="scope">
              <el-button type="text"  size="default" @click="handleDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-form>
    <p style="margin-top: 10px;">注：</p>
    <p>1、本栏目统计本单位截止{{year}}年底建立的所有境外机构。</p>

  </div>

</template>
<script>

import {
  getDictByCode,
  getTableInfoByPage,
  mfSaveExchange,
  mfSaveMechanismWork,
  mfSaveOversea
} from '@/views/yearCheck/ykb/mf/mf'

export default {
  data() {
    return {
      year:localStorage.getItem('examineYear'),
      addDialog: false,
      internationalChecked: false,
      abroadChecked: false,
      listForm: [],
      postForm: {
        id:'',
        institutionName: '',//机构名称
        institutionCountry: '',//所在国家
        institutionType: '',//机构类型
        establishTime: '',//设立时间
        responsible: '',//负责人
        expatriatesNum: '',//外派人数
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear: localStorage.getItem("examineYear"),//审查年度
        organizationBaseId: '1',//社团组织id
      },
      listRules: {
        // institutionName: [{ required: true, message: '请完善', trigger: 'blur' }],
        // institutionCountry:[{ required: true, message: '请选择', trigger: 'blur' }],
        // institutionType: [{ required: true, message: '请选择', trigger: 'blur' }],
        // establishTime:[{ required: true, message: '请选择', trigger: 'blur' }],
        // responsible: [{ required: true, message: '请完善', trigger: 'blur' }],
        // expatriatesNum: [{ required: true, message: '请完善', trigger: 'blur' }],
      },
      exChange: {
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear: localStorage.getItem("examineYear"),//审查年度
        organizationBaseId:'1',//社团组织id
        hostNum: '',//主办
        internationalVisits: '',//国际出访
        participateNum: '',//参与次数
        participateUnit: '',//单位共计
        participateVisiting: '',//参与出访团组
        undertakingNum: '',//承办
      },
      exChangeRules:{
        hostNum:[{ required: true, message: '请完善', trigger: 'blur' }],
        internationalVisits: [{ required: true, message: '请完善', trigger: 'blur' }],
        participateNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        participateUnit: [{ required: true, message: '请完善', trigger: 'blur' }],
        participateVisiting:[{ required: true, message: '请完善', trigger: 'blur' }],
        undertakingNum:[{ required: true, message: '请完善', trigger: 'blur' }],
      },
      countryOptions:undefined,
      orgTypeOptions:undefined,
    };
  },

  created() {


  },
  methods: {
    postInfo(){
      this.exChange.creditCode = localStorage.getItem('creditCode');
      this.exChange.examineYear = localStorage.getItem('examineYear');
      this.exChange.organizationBaseId = '1';
      this.$refs.exChangeRef.validate(valid=> {
        if(valid){
          mfSaveExchange(this.exChange).then(response => {
            this.$message({
              message: '保存参加国际会议和出访情况成功！',
              type: 'success'
            });
            this.getInfo();
          });
        }else{
          this.$message({
            message: '请填写完整-参加国际会议和出访情况！',
            type: 'error'
          });
        }
      });
      this.$refs.listFormRef.validate(valid=> {
        if (valid) {
          if(this.listForm == null || this.listForm.length == 0){
            return;
          }
          for (let i = 0; i < this.listForm.length; i++) {
            this.listForm[i].creditCode = localStorage.getItem("creditCode");
            this.listForm[i].examineYear = localStorage.getItem("examineYear");
          }
          mfSaveOversea(this.listForm).then(response => {
            this.$message({
              message: '保存境外设立机构情况成功！',
              type: 'success'
            });
            this.getInfo();
          });
        } else {
          this.$message({
            message: '请填写完整-境外设立机构情况！',
            type: 'error'
          });
        }
      });

    },
    addList(){
      this.addDialog = false;
      this.listForm.push(Object.assign({}, this.postForm));
    },
    handleDelete(index) {
      this.listForm.splice(index, 1);
    },
    getInfo() {
      this.year = localStorage.getItem("examineYear");
      getDictByCode('country').then(response => {
        this.countryOptions = response.data;
      });
      getDictByCode('orgType').then(response => {
        this.orgTypeOptions = response.data;
      });
      getTableInfoByPage(10).then(response => {
        this.listForm = response.data.overseasList;
        if(this.listForm == null  || this.listForm == ''){
          this.listForm = [];
        }
        this.exChange = response.data.internationalExchange;
      });
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
<!--    <el-dialog title="新增境外设立机构" v-model="addDialog">-->
<!--      <el-form  size="default" :model="postForm" ref="postForm" label-width="80px" label-position="left">-->
<!--        <el-row :gutter="20">-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="机构名称" prop="institutionName">-->
<!--              <el-input v-model="postForm.institutionName" placeholder="请输入"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="所在国家" prop="institutionCountry">-->
<!--              <el-select clearable  v-model="postForm.institutionCountry" filterable placeholder="请选择" style="width: 100%;">-->
<!--                <el-option-->
<!--                  v-for="dict in countryOptions"-->
<!--                  :key="dict.id"-->
<!--                  :label="dict.name"-->
<!--                  :value="dict.id"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="机构类型" prop="institutionType">-->
<!--              <el-select clearable  v-model="postForm.institutionType" filterable placeholder="请选择" style="width: 100%;">-->
<!--                <el-option-->
<!--                  v-for="dict in orgTypeOptions"-->
<!--                  :key="dict.id"-->
<!--                  :label="dict.name"-->
<!--                  :value="dict.id"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="设立时间" prop="establishTime">-->
<!--              <el-date-picker-->
<!--                value-format="YYYY-MM-DD"-->
<!--                style="width: 100%;"-->
<!--                v-model="postForm.establishTime"-->
<!--                type="date"-->
<!--                placeholder="设立时间">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="11">-->
<!--            <el-form-item label="负责人" prop="projectFunding">-->
<!--              <el-input v-model="postForm.responsible" placeholder="请输入">-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="外派人数" prop="achievementProblem">-->
<!--              <el-input v-model="postForm.expatriatesNum" placeholder="请输入">-->
<!--              </el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="addDialog = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="addList()">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--<table border="" style="width: 100%; text-align: center; font-size: 14px;">-->
<!--<tr>-->
<!--  <td rowspan="2">本年度参加国际会议情况</td>-->
<!--  <td rowspan="2" colspan="2">共计参加-->
<!--    <el-form-item prop="participateUnit">-->
<!--      <el-input type="number" v-model="exChange.participateUnit" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>-->
<!--    次，其中，-->
<!--  </td>-->
<!--  <td>主办（联合主办）</td>-->
<!--  <td>承办（联合承办）</td>-->
<!--  <td>参与</td>-->
<!--</tr>-->
<!--<tr>-->
<!--  <td>-->
<!--    <el-form-item prop="hostNum">-->
<!--      <el-input type="number" v-model="exChange.hostNum" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>次-->
<!--  </td>-->
<!--  <td>-->
<!--    <el-form-item prop="undertakingNum">-->
<!--      <el-input type="number" v-model="exChange.undertakingNum" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>次-->
<!--  </td>-->
<!--  <td>-->
<!--    <el-form-item prop="participateNum">-->
<!--      <el-input type="number" v-model="exChange.participateNum" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>次-->
<!--  </td>-->
<!--</tr>-->
<!--<tr>-->
<!--  <td>本年度出国（境）情况</td>-->
<!--  <td colspan="4">组织或者参与出访团组共计-->
<!--    <el-form-item prop="participateVisiting">-->
<!--      <el-input type="number" v-model="exChange.participateVisiting" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>-->
<!--    个，本单位共计-->
<!--    <el-form-item prop="internationalVisits">-->
<!--      <el-input type="number" v-model="exChange.internationalVisits" placeholder="请输入" style="width: 90%;"/>-->
<!--    </el-form-item>-->
<!--    人次出访。-->
<!--  </td>-->
<!--</tr>-->
<!--</table>-->
